<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/index.css?v=15">
</head>
<body>
    <div class="page-group ms-controller" :controller="index">
        <div class="page page-current">
            <div class="content visibility">
                <a style="display: block;width: 100%;text-align: center;margin: 20px auto 5px auto;">
                    <img class="maxWidth" src="/logo">
                </a>
                <div class="banner" :if="@banner.length>0">
                    <ul>
                        <li :for="el in @banner"><a :attr="{'href': el.link_url}" style="display:block; background-color: #eee; width:100%; height: 100%;">
                            <img :attr="{'src': el.pic_path}" width='100%' height="100%" onerror="$(this).css('display','none')" alt="">
                        </a></li>
                    </ul>
                </div>
                <ul class="ctrl">
                    <li><a href="/H5/mall"><img src="/H5/images/index_icons_03.png" alt=""><p>精品商城</p></a></li>
                    <li><a href="/H5/member"><img src="/H5/images/index_icons_05.png" alt=""><p>会员资料</p></a></li>
                    <li><a href="/H5/article"><img src="/H5/images/index_icons_07.png" alt=""><p>精彩报道</p></a></li>
                    <li><a href="/H5/finance"><img src="/H5/images/index_icons_09.png" alt=""><p>财务管理</p></a></li>
                    <li :visible="@data.open_yibao==1"><a :on-click="@getUrl"><img src="/H5/images/index_icons_15.png" alt=""><p>艺宝在线</p></a></li>
                    <li :visible="@data.open_expert==1"><a href="javascript:$.alert('建设中');"><img src="/H5/images/zjzx.png" alt=""><p>专家在线</p></a></li>
                    <li><a href="/H5/notice"><img src="/H5/images/index_icons_16.png" alt=""><p>新闻公告</p></a></li>
                    <li style="position:relative;"><a :attr="{'href': @message>0?'/H5/custom?type=2':'/H5/custom?type=1'}"><img src="/H5/images/index_icons_17.png" alt=""><p>在线客服</p><span :visible="@message>0" style="position:absolute; top: 0; right: 0; background-color: #f00; color: #fff; min-width: 1.5rem; height: 1.5rem;border-radius: 1.2rem; border: 3px solid #fff;">{{@message}}</span></a></li>
                    <li><a href="javascript:;" :on-click="@logout"><img src="/H5/images/index_icons_18.png" alt=""><p>退出登录</p></a></li>
                </ul>
                <footer>
                    <p></p>
                </footer>
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
        var timer;
        var index = avalon.define({
            $id: "index",
            loading: false,
            message: "",
            banner: [],
            data: {},
            getBanner: function(){
                Mall.request( "/api/SiteHome" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                           index.banner = data.data.banner;
                            if( index.banner.length > 1 ){
                                if(data.data.banner.length == 2){
                                    var datas = data.data.banner;
                                    datas.push( data.data.banner[0] );
                                    index.banner = datas
                                }
                                function autoRoll(){
                                    $( ".banner ul" ).animate({"margin-left": "-200%"}, 300, "linear",function(){
                                        $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
                                        $( ".banner ul" ).css({"margin-left": "-100%"});
                                    })
                                }
                                timer = setInterval( function(){autoRoll();}, 3000 );
                                function swipe( k ){
                                    timer && clearInterval( timer );
                                    if( k == "left" ){
                                        $(".banner ul").animate({"margin-left": "-200%"},300,"linear",function(){
                                            $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval( function(){autoRoll();}, 3000 )
                                        })
                                    }
                                    else{
                                        $(".banner ul").animate({"margin-left": 0},300,"linear",function(){
                                            $($(".banner ul li")[$(".banner ul li").length-1]).remove().clone().prependTo(".banner ul" );
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval( function(){autoRoll();}, 3000 )
                                        })
                                    }
                                }
                                $(".banner ul").swipeLeft( function(){
                                    swipe( "left" );
                                } )
                                $(".banner ul").swipeRight( function(){
                                    swipe();
                                } )
                            }
                        }
                        else{
                            $.alert(data.error_msg)
                        }
                        $( ".content" ).removeClass( "visibility" )
                    } )
            },
            logout: function(){
                simpleStorage.set('token', undefined);
                window.location.href='/H5';
            },
            getUrl: function(){
                if( index.loading ){
                    return
                }
                index.loading = true;
                Mall.request( "/api/SynLogin" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                           window.location.href = data.data.syn_login_url
                        }
                        else{
                            $.alert(data.error_msg);
                            index.loading = false;  
                        }
                    } )
            },
            info: function(){
                Mall.request( "/api/UserInfo" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            index.message = data.data.notice.customer_service;
                        }
                        else{
                            $.alert(data.error_msg)
                        }
                    } )
            }
        })
        index.getBanner();
        index.info();
        avalon.scan( document.body )
    </script>
</body>
</html>